---

export interface Props {
  title?: string;
  date?: string;
  cover?: string;
  tags?: string[];
  meta?: string;
  pin?: boolean;
}
const {
  title = '',
  date  = '',
  cover = '',
  tags  = [],
  meta  = '',
  pin   = false,
} = Astro.props;


const fmtDate = date
  ? new Date(date).toLocaleDateString('zh-CN').replace(/\//g, '.')
  : '';

import Sidebar    from '../components/Sidebar.astro';
import BottomCard from '../components/BottomCard.astro';
---

<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>{title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div class="page">
      <!-- 侧边栏 -->
      <Sidebar />

      <!-- 右侧内容区 -->
      <main class="main">
        <!-- ===== 文章头部信息 ===== -->
        {cover && <img class="cover" src={cover} alt={title} />}

        <header class="post-head">
          <h1>{title}</h1>
          {pin && <span class="pin">📌 置顶</span>}
          {fmtDate && <time datetime={date}>{fmtDate}</time>}
        </header>

        {tags.length > 0 && (
          <ul class="tags">
            {tags.map(tag => <li class="tag">{tag}</li>)}
          </ul>
        )}

        {meta && <p class="meta">{meta}</p>}

        <!-- ===== 正文插槽 ===== -->
        <slot />

        <!-- ===== 底部卡片 ===== -->
        <footer class="footer">
          <BottomCard />
        </footer>
      </main>
    </div>
  </body>
</html>

<style>
/* 布局骨架 */
.page { display:flex; min-height:100vh; }
.main {
  flex:1;
  padding:32px 16px;
  max-width:800px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-left:10px;
}

/* 封面图 */
.cover {
  width:100%;
  border-radius:12px;
  object-fit:cover;
}

/* 标题区 */
.post-head {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
}
.post-head h1 { margin:0; font-size:2rem; line-height:1.2; }
.pin          { color:#e91e63; font-size:1.25rem; }

/* 标签 */
.tags { display:flex; gap:.5rem; list-style:none; padding:0; margin:0; }
.tag  { background:#eee; padding:.2rem .6rem; border-radius:4px; font-size:.8rem; }

/* 元信息 */
.meta { color:#888; font-size:.85rem; margin:0; }

/* 底部卡片区域 */
.footer { margin-top:auto; }
</style>
